<template>
  <el-container>
    <el-main>

      <el-button-group style="margin-bottom: 5px;">
        <el-button icon="el-icon-plus" size="small" :disabled="!addEnable"  @click="handleClickAdd"></el-button>
        <el-button icon="el-icon-edit" size="small" :disabled="!editEnable" @click="handleClickEdit"></el-button>
        <el-button icon="el-icon-delete" size="small" :disabled="!deleteEnable" @click="handleClickDelete"></el-button>
      </el-button-group>

      <el-table
        :data="tableData"
        size="small"
        :default-sort = "{prop: 'entityName', order: 'descending'}"
        @row-dblclick="handleRowDblClick"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange">

        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="entityCode"
          label="实体编码"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="entityName"
          label="实体名称"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="entityDesc"
          label="实体描述">
        </el-table-column>
      </el-table>

      <el-pagination
        
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 15, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        total: 0,
        pageNo: 1,
        pageSize: 10,
        tableData: [],
        selectedTableData: [],
        sortName: "entityName",
        sortOrder: "ascending"
      }
    },
    mounted() {
      this.listData();
    },
    computed: {
      addEnable: function() {
        return this.selectedTableData.length === 0;
      },
      editEnable: function() {
        return this.selectedTableData.length === 1;
      },
      deleteEnable: function() {
        return this.selectedTableData.length > 0;
      }
    },
    methods: {
      handleSortChange(column) {
        this.sortName = column.prop;
        this.sortOrder = column.order;
        this.listData();
      },
      handleRowDblClick(row) {  
        let entityId = row.entityId;
        this.$router.push('/entity/form?entityId=' + entityId + "&type=view");
      },
      handleClickAdd() {
        this.$router.push('/entity/form?type=add');
      },
      handleClickEdit() {
        let entityId = this.selectedTableData[0].entityId;
        this.$router.push('/entity/form?entityId=' + entityId + "&type=edit");
      },
      handleClickDelete() {
        let me = this;
        let ok = (res) => {
          me.listData();
        };
        let err = (error) => {
          console.log(error);
        };
        let modelIds = [];
        for(let i = 0, len = this.selectedTableData.length; i < len; i++) {
          modelIds.push(this.selectedTableData[i].entityId);
        }
        this.$http
          .post("/uni/delete", {
              modelName: "entity",
              modelIds: modelIds
          })
          .then(ok)
          .catch(err);
      },
      handleSelectionChange(val) {
        this.selectedTableData = val;
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        this.listData();
      },
      handleCurrentChange(pageNo) {
        this.pageNo = pageNo;
        this.listData();
      },
      listData() {
        let me = this;
        
        let ok = (res) => {
          me.tableData = res.data.data.list;
          me.total = res.data.data.pagination.total;
          me.pageNo = res.data.data.pagination.pageNo;
          me.pageSize = res.data.data.pagination.pageSize;
        };
        let err = (error) => {
          console.log(error);
        };
        this.$http
          .post("/uni/list", {
              modelName: "entity",
              pagination: {
                pageNo: me.pageNo,
                pageSize: me.pageSize
              },
              orders:[{
                ascending: me.sortOrder === "ascending",
                propertyName: me.sortName
              }]
          })
          .then(ok)
          .catch(err);
        },
    }
  }
</script>